#!/usr/bin/env python3
"""
Element UI主题管理器使用示例

演示如何使用主题管理器和样式引擎来创建和管理主题
"""

import sys
import os

# 添加项目根目录到Python路径
sys.path.insert(0, os.path.join(os.path.dirname(__file__), '..'))

from element_ui.styles import (
    ThemeManager, 
    theme_manager, 
    style_engine,
    Theme,
    ElementColors
)
from element_ui.styles.theme_manager import ThemeChangeEvent


def demo_basic_theme_usage():
    """演示基础主题使用"""
    print("=== Element UI 主题管理器基础使用演示 ===")
    
    # 获取当前主题
    current_theme = theme_manager.get_current_theme()
    print(f"当前主题: {current_theme}")
    
    # 获取可用主题列表
    available_themes = theme_manager.get_available_themes()
    print(f"可用主题: {available_themes}")
    
    # 获取主题变量
    primary_color = theme_manager.get_color("primary")
    font_size = theme_manager.get_size("font-size-base")
    
    print(f"主题颜色 - primary: {primary_color}")
    print(f"字体大小 - base: {font_size}")
    
    print()


def demo_color_system():
    """演示Element UI颜色系统"""
    print("=== Element UI 颜色系统演示 ===")
    
    # 主要颜色
    print("主要颜色:")
    print(f"  Primary: {Theme.get_color('primary')}")
    print(f"  Success: {Theme.get_color('success')}")
    print(f"  Warning: {Theme.get_color('warning')}")
    print(f"  Danger: {Theme.get_color('danger')}")
    print(f"  Info: {Theme.get_color('info')}")
    
    # 主色调色板
    print("\n主色调色板:")
    for i in range(1, 10):
        color = Theme.get_color(f'primary-light-{i}')
        print(f"  Primary Light {i}: {color}")
    
    # 文本颜色
    print("\n文本颜色:")
    print(f"  Primary Text: {Theme.get_color('text-primary')}")
    print(f"  Regular Text: {Theme.get_color('text-regular')}")
    print(f"  Secondary Text: {Theme.get_color('text-secondary')}")
    print(f"  Placeholder Text: {Theme.get_color('text-placeholder')}")
    
    # 边框颜色
    print("\n边框颜色:")
    print(f"  Base Border: {Theme.get_color('border-base')}")
    print(f"  Light Border: {Theme.get_color('border-light')}")
    print(f"  Lighter Border: {Theme.get_color('border-lighter')}")
    print(f"  Extra Light Border: {Theme.get_color('border-extra-light')}")
    
    print()


def demo_theme_switching():
    """演示主题切换"""
    print("=== 主题切换演示 ===")
    
    # 定义主题变更监听器
    def on_theme_change(event: ThemeChangeEvent):
        print(f"主题已从 '{event.old_theme}' 切换到 '{event.new_theme}'")
        print(f"新主题的主色调: {Theme.get_color('primary')}")
        print(f"新主题的文本颜色: {Theme.get_color('text-primary')}")
    
    # 订阅主题变更事件
    theme_manager.subscribe_theme_change(on_theme_change)
    
    print("当前主题背景色:", Theme.get_color('bg-base'))
    print("当前主题文本色:", Theme.get_color('text-primary'))
    
    # 切换到暗色主题
    print("\n切换到暗色主题...")
    theme_manager.switch_theme("element-dark")
    
    print("暗色主题背景色:", Theme.get_color('bg-base'))
    print("暗色主题文本色:", Theme.get_color('text-primary'))
    
    # 切换回默认主题
    print("\n切换回默认主题...")
    theme_manager.switch_theme("element-default")
    
    # 取消订阅
    theme_manager.unsubscribe_theme_change(on_theme_change)
    
    print()


def demo_custom_theme():
    """演示自定义主题创建"""
    print("=== 自定义主题演示 ===")
    
    # 创建自定义主题配置
    custom_theme = {
        "name": "my-custom-theme",
        "description": "我的自定义主题",
        "version": "1.0.0",
        "colors": {
            "primary": "#FF6B6B",        # 红色主题
            "success": "#4ECDC4",        # 青色成功
            "warning": "#FFE66D",        # 黄色警告
            "danger": "#FF8E8E",         # 粉红危险
            "info": "#A8E6CF",           # 绿色信息
            
            # 继承默认主题的其他颜色
            "text-primary": ElementColors.TEXT_PRIMARY,
            "text-regular": ElementColors.TEXT_REGULAR,
            "border-base": ElementColors.BORDER_BASE,
            "bg-base": ElementColors.BG_BASE,
        },
        "sizes": {
            "font-size-base": "16px",    # 更大的基础字体
            "component-size-large": "44px",  # 更大的组件
            "border-radius-base": "8px", # 更圆的边角
        },
        "components": {
            "button": {
                "height": "44px",
                "padding": "14px 24px",
                "font-size": "16px",
            }
        }
    }
    
    # 注册自定义主题
    success = theme_manager.register_theme(custom_theme)
    print(f"自定义主题注册{'成功' if success else '失败'}")
    
    # 切换到自定义主题
    theme_manager.switch_theme("my-custom-theme")
    
    print(f"自定义主题主色调: {Theme.get_color('primary')}")
    print(f"自定义主题字体大小: {Theme.get_size('font-size-base')}")
    print(f"自定义主题边框圆角: {Theme.get_size('border-radius-base')}")
    
    # 显示更多自定义主题的颜色
    print(f"自定义主题成功色: {Theme.get_color('success')}")
    print(f"自定义主题警告色: {Theme.get_color('warning')}")
    print(f"自定义主题信息色: {Theme.get_color('info')}")
    
    # 切换回默认主题
    theme_manager.switch_theme("element-default")
    
    print()


def demo_style_engine():
    """演示样式引擎使用"""
    print("=== 样式引擎演示 ===")
    
    # 创建按钮样式
    print("按钮样式:")
    button_styles = {
        "primary": style_engine.create_button_style("primary", "medium"),
        "success": style_engine.create_button_style("success", "small"),
        "warning": style_engine.create_button_style("warning", "large"),
    }
    
    for style_type, style_config in button_styles.items():
        print(f"  {style_type.title()} 按钮样式: {style_config}")
    
    # 创建输入框样式
    print("\n输入框样式:")
    input_styles = {
        "normal": style_engine.create_input_style("medium", "normal"),
        "focus": style_engine.create_input_style("medium", "focus"),
        "error": style_engine.create_input_style("medium", "error"),
    }
    
    for state, style_config in input_styles.items():
        print(f"  {state.title()} 输入框样式: {style_config}")
    
    # 解析CSS样式
    print("\nCSS样式解析:")
    css_style = {
        "background-color": "var(--primary)",
        "border": "1px solid var(--border-base)",
        "border-radius": "var(--border-radius-base)",
        "padding": "10px 20px",
        "color": "white"
    }
    
    parsed_style = style_engine.parse_css_style(css_style)
    print(f"  原始CSS: {css_style}")
    print(f"  解析结果: {parsed_style}")
    
    print()


def demo_theme_cloning():
    """演示主题克隆"""
    print("=== 主题克隆演示 ===")
    
    # 克隆默认主题并修改
    modifications = {
        "colors.primary": "#8B5CF6",      # 紫色主题
        "colors.success": "#10B981",      # 更现代的绿色
        "sizes.border-radius-base": "12px", # 更圆的边角
    }
    
    success = theme_manager.clone_theme(
        "element-default", 
        "purple-theme", 
        modifications
    )
    
    print(f"主题克隆{'成功' if success else '失败'}")
    
    if success:
        # 切换到克隆的主题
        theme_manager.switch_theme("purple-theme")
        print(f"紫色主题主色调: {Theme.get_color('primary')}")
        print(f"紫色主题成功色: {Theme.get_color('success')}")
        print(f"紫色主题边框圆角: {Theme.get_size('border-radius-base')}")
        
        # 切换回默认主题
        theme_manager.switch_theme("element-default")
    
    print()


def main():
    """主函数"""
    print("Element UI Python QtQuick 组件库 - 主题管理器演示\n")
    
    # 运行各个演示
    demo_basic_theme_usage()
    demo_color_system()
    demo_theme_switching()
    demo_custom_theme()
    demo_style_engine()
    demo_theme_cloning()
    
    print("演示完成！")
    
    # 显示最终的主题信息
    print(f"\n最终状态:")
    print(f"当前主题: {theme_manager.get_current_theme()}")
    print(f"可用主题: {theme_manager.get_available_themes()}")


if __name__ == "__main__":
    main()
